<template> 
    <div class="page-all-store">
        <Banner :banners="indexBanners" />
        <TabBox type="w6" :tabs="tabs" route-type="redirect" />
        <!-- <shopTabBox type="w6" :tabs="tabs" route-type="redirect"/> -->

        <div class="select-wrap text-normal">
            <div class="select-box grey-color">
                <div class="select" :class="{ 'primary-color bor-bottom': selectType === 'sort'}" @click="onClickSelectType('sort')">
                    <span class="text">{{selectName ? selectName : '排序'}}</span>
                    <span class="icon" :class="{ 'invert primary-color': selectType === 'sort'}">&#xeb6d;</span>
                </div>
                <div class="select" :class="{ 'primary-color bor-bottom': selectType === 'select'}" @click="onClickSelectType('select')">
                    <span class="text">筛选</span>
                    <span class="icon" :class="{ 'invert primary-color': selectType === 'select'}">&#xeb6d;</span>
                </div>
                <div class="options-box text-normal" catchtouchmove="move" v-if="selectType">
                    <div class="white-bg" v-if="selectType === 'sort'">
                        <div class="item clearfix" :class="{ 'primary-color': selectValue === item }" @click="onClickSelectValue(item)" v-for="(item, index) in sortOptions" :key="index">
                            <div class="fl">
                                {{item.name}}
                            </div>
                            <div class="icon fr" v-if="selectValue === item">&#xe633;</div>
                        </div>
                    </div>
                    <div class="white-bg text-normal" v-if="selectType === 'select'">
                        <div class="title">关键字搜索</div>
                        <div class="input-box text-center">
                            <input type="text" v-model="searchKey" placeholder="输入关键字" class="input grey-bg">
                        </div>
                        <div class="btn-box">
                            <div class="btn btn-mobile btn-block btn-white-red red-border" @click="onClickReset">重置</div>
                            <div class="btn btn-mobile btn-block btn-red" @click="onClickConfirm">确定</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="goods-box" >
            <div class="inner">
                <ShopListItem v-for="(shop, index) in shopList"
                :key="index"
                :container-class="['after-line']"
                :name="shop.name"
                :cover="shop.cover"
                :tag="shop.tag"
                :is-photography="shop.is_photography"
                :good="shop.goods_number"
                :pkg="shop.package_number"
                :visitor-number="shop.visitor"
                :features="shop.features"
                :starting-price="shop.starting_price"
                @click="onClickShop(shop)" />
            </div>
        </div>
        <ListEmpty v-if="!req && shopList.length === 0" />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import LineTitle from '@/components/common/lineTitle.vue';
import Banner from '@/components/common/banner.vue';
import TabBox from '@/components/common/tabBox.vue';
import shopTabBox from '@/components/common/shopTabBox.vue';
import ShopListItem from '@/features/shop/listItem.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import {
    api,
} from '@/lib/api';

import { Component, Vue } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';
import { Route } from 'vue-router';
import { EMPTY_LIST } from '@/lib/constant';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'ShopList',
    components: {
        LineTitle,
        Banner,
        TabBox,
        shopTabBox,
        ShopListItem,
        ListEmpty,
    },
})
export default class ShopList extends Vue {
    public title: any = '';
    public selectType: any = '';

    /** 排序选项 */
    public sortOptions: any = [
        {
            val: 'popularity',
            name: '综合排序',
        },
        {
            val: 'multiple',
            name: '高人气',
        },
        {
            val: 'good',
            name: '商品最多',
        },
    ];

    public selectValue: any = '';
    public selectName: any = '';
    public searchKey: any = '';

    /** 当前是否正在onload请求 */
    public req: any = true;

    public get type() {
        return this.$route.query.type;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    /** 服务信息 */
    public get service() {
        return store.state.utils.service;
    }

    /** banners */
    public get indexBanners() {
        return store.state.shop.indexBanners;
    }

    /** 店铺列表 */
    public get shopListMap() {
        return store.state.shop.shopList;
    }

    /** 店铺详情 */
    public get shopMap() {
        return store.state.shop.shopMap;
    }
    
    // 门店评价
    public onClickComments(pkgId) {
        // api.navigateTo({
        //     url: '/pages/pkg_comments/main',
        //     query: {
        //         good_id: this.pkgId,
        //         type: 'pkg',
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_COMMENT,
            params: {
                goodId: pkgId + '',
                type: 'mendain',
            },
        });
    }

    public get tabs() {
        const name = ROUTE_NAME.SHOP_LIST;
        return [
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e7ba.png',
                text: '婚纱摄影',
                to: { name, query: { type: '婚纱摄影' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e602.png',
                text: '结婚首饰',
                to: { name, query: { type: '结婚首饰' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e604.png',
                text: '婚宴酒宴',
                to: { name, query: { type: '婚宴酒宴' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e621.png',
                text: '美妆护肤',
                to: { name, query: { type: '美妆护肤' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e666.png',
                text: '礼服租售',
                to: { name, query: { type: '礼服租售' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e6b3.png',
                text: '婚宴喜酒',
                to: { name, query: { type: '婚宴喜酒' } },
            },
        ];
    }

    public get key() {
        return `${this.type}_${this.selectValue}_${this.searchKey}`;
    }

    public get getlocationDetail(){
        return store.state.shop.locationDetail;
    }

    /** 店铺列表 */
    public get shopList() {
        const wrap = this.shopListMap[this.key] || EMPTY_LIST;
        return wrap.list.map((id) => this.shopMap[id]);
    }

    public onClickSelectType(type: any) {
        if (this.selectType === type) {
            this.selectType = '';
            return;
        }
        this.selectType = type;
    }

    /**
     * 选择排序逻辑
     */
    public onClickSelectValue(item: any) {
        this.selectValue = item.val;
        this.selectName = item.name;
        this.selectType = '';
        this.searchKey = '';
        this.getList();
    }

    /** 重置关键字 */
    public onClickReset() {
        this.searchKey = '';
        this.getList();
    }

    /**
     * 确认关键字
     */
    public onClickConfirm() {
        this.selectType = '';
        this.getList();
    }
    /**
     * 获取店铺列表
     */
    public async getList(offset?: any) {
        await store.dispatch('shop/getShopList', {
            offset: this.shopList.length,
            count: 10,
            sort: this.selectValue,
            search: this.searchKey,
            category: this.type
        });
    }
    // 打开店铺评论
    public async makecomment(shop: Shop.ListItem){
        api.push({
            name: ROUTE_NAME.PKG_COMMENT,
            params: {
                goodId: shop.id + '',
                type: 'mendain',
            },
        });
    }

    public async onClickShop(shop: Shop.ListItem) {
        if (shop.is_photography) {
            // api.navigateTo({
            //     url: '/pages/shop_bridal/main',
            //     query: {
            //         shop_id: shop.id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.SHOP_BRIDAL,
                params: {
                    shopId: shop.id + '',
                },
            });
        } else {
            // api.navigateTo({
            //     url: '/pages/shop_product/main',
            //     query: {
            //         shop_id: shop.id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.SHOP_PRODUCT,
                params: {
                    shopId: shop.id + '',
                },
            });
        }
    }
    public async onReachBottom() {
        await this.getList();
    }

    public async created() {
        window.addEventListener('reachbottom', this.onReachBottom);
        window.onShareAppMessage = data => {
            const url = this.$router.resolve({
                name: ROUTE_NAME.SHOP_LIST,
                query: {
                    referrer: this.userBasicInfo.id + '',
                    type: this.title,
                },
            }).route.fullPath;
            return {
                title: '全部商家',
                imageUrl: '',
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            }
        };

        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('shop/getShopList', {
                offset: 0,
                count: 10,
                // todo
                sort: this.selectValue,
                search: this.searchKey,
                category: this.type
            }),
            
            store.dispatch('shop/getIndexBanners'),
            store.dispatch('utils/etService'),
        ]);
        store.commit('utils/endRequest');
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";
@import "../../lib/style/features/line.less";

.page-all-store {
    .hot-recommend {
        padding: 10px 51rpx;
        .content {
            margin-right: -10px;
            .item {
                width: 156px;
                height: 88px;
                margin-top: 10px;
                margin-right: 10px;
                box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
                border-radius: 10px;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }
    }
    .goods-box {
        // padding: 10px 30rpx;
        .inner {
            padding: 0 13px;
        }
    }

    .select-wrap {
        padding-top: 20px;

        .select-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            .select {
                .text {
                    display: inline-block;
                    padding-bottom: 10px;
                    border-bottom: 2rpx solid transparent;
                }
                &.bor-bottom {
                    .text {
                        border-bottom: 2rpx solid @primary-color;
                    }
                }
                .icon {
                    display: inline-block;
                    margin-left: 10rpx;
                    font-size: 10px;
                    transition: transform .3s;
                }
                .invert {
                    transform-origin: center;
                    transform: rotateZ(-180deg);
                }
            }
            .options-box {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: calc(~"100vh - 100%");
                overflow-y: scroll;
                background: rgba(0, 0, 0, 0.55);
                z-index: 1;
                .title {
                    padding-left: 10px;
                    padding-top: 10px;
                }
                .input-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 10px 50rpx;
                    .input {
                        display: inline-block;
                        width: 264px;
                        height: 34px;
                        border-radius: 40rpx;
                    }
                }
                .btn-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 50rpx;
                    .btn {
                        width: 150px;
                        height: 32px;
                        line-height: 32px;
                        border-radius: 40rpx;
                        overflow: hidden;
                    }
                }
                .item {
                    padding: 10px;
                    &:not(:last-child) {
                        border-bottom: 2rpx solid #f5f5f5;
                    }
                }
            }
        }
    }
}

</style>
